<template>
  <div class="market">
    <nav-bar class="nav-bar">
      <template #center>购物车({{ $store.getters.getCount }})</template>
    </nav-bar>
    <common-scroll @getPosition="getPosition" :probe-type="3" ref="scroll">
      <market-list />
    </common-scroll>
    <market-bottom-bar />
  </div>
</template>

<script>
import { backTopMixin } from "utils/mixins";

import MarketList from "./base/MarketList";
import MarketBottomBar from "./base/BottomBar";
export default {
  name: "Market",

  data() {
    return {};
  },
  components: {
    MarketList,
    MarketBottomBar,
  },
  methods: {
    getPosition(position) {
      // console.log('market组件的位置',position)
      const positionY = -position.y;
      this.isShowBackTop = positionY >= 100;
    },
  },
};
</script>

<style scoped lang="less">
.market {
  height: calc(100vh - 49px);
  width: 100vw;
  position: relative;
}

.nav-bar {
  background-color: #ff5777;
  font-weight: bold;
  color: #fff;
  z-index: 99;
}

.wrapper {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 46px;
  left: 0;
  right: 0;
}
</style>
